<template>
  <div class="employees-container">
    <div class="app-container">
      <!-- // ! 公共组件 -->
      <Page-tools>
        <template #left>
          <span>总记录数: 16 条</span>
        </template>
        <template #right>
          <!-- // ! 点击导入，跳转到 import -->

          <!-- // ! v-allow="'xxx'"  自定义指令  -->
          <!-- // ! xxx 内容必须和 权限管理内的权限标识一致，实现绑定-->
          <el-button
            v-allow="'import_excel'"
            type="warning"
            size="small"
            @click="$router.push('import')"
          >
            excel导入
          </el-button>
          <el-button
            v-allow="'export_excel'"
            type="danger"
            size="small"
            @click="hExportExcel"
          >
            excel导出
          </el-button>
          <el-button
            v-allow="'add_employees'"
            type="primary"
            size="small"
            @click="showDialog = true"
          >
            新增员工
          </el-button>
        </template>
      </Page-tools>

      <el-card style="margin-top: 10px">
        <!-- // ! :default-sort 设置默认排序 -->
        <el-table
          :data="EmployeesList"
          :default-sort="{ prop: 'timeOfEntry', order: 'ascending' }"
          border
        >
          <el-table-column type="index" label="序号" />
          <el-table-column prop="username" label="姓名" />
          <!-- // ! sortable 设置排序 -->
          <el-table-column sortable prop="workNumber" label="工号" />

          <el-table-column prop="formOfEmployment" label="聘用形式">
            <template #default="{ row }">
              <!-- // ! 如果没有 id，则直接显示未知 -->
              {{ forOfEmploymentFormat(row.formOfEmployment) || '未知' }}
            </template>
          </el-table-column>

          <el-table-column prop="departmentName" label="部门" />
          <el-table-column sortable prop="timeOfEntry" label="入职时间" />
          <!-- <el-table-column prop="username" label="账户状态" /> -->
          <el-table-column label="操作" width="280">
            <template #default="{ row }">
              <el-button
                type="text"
                size="small"
                @click="$router.push(`employees/detail?id=${row.id}`)"
              >
                <!-- // ! 查询字符串传参 employees/detail?id=${row.id}  -->
                查看
              </el-button>
              <el-button type="text" size="small" @click="hAssignRole(row.id)">
                分配角色
              </el-button>
              <el-button type="text" size="small" @click="hDel(row.id)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <el-row
          type="flex"
          justify="center"
          align="middle"
          style="height: 60px"
        >
          <el-pagination
            :current-page="page"
            :page-sizes="[3, 5, 10, 20]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </el-card>

      <!-- // ! 新增的弹出框 -->
      <el-dialog title="新增" :visible.sync="showDialog">
        <!-- // ! 目的是销毁组件，所以 v-if 是放在组件上面 -->
        <add-or-edit
          v-if="showDialog"
          @close="showDialog = false"
          @success="hSuccess"
        />
      </el-dialog>

      <!-- // ! 权限的弹出框 -->
      <el-dialog
        title="分配权限"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :visible.sync="showRoleDialog"
      >
        <!-- // ! 传给子组件的数据 curId  -->
        <!-- // ! 从子组件传来的函数 @close @success -->
        <assign-role
          v-if="showRoleDialog"
          :cur-id="curId"
          @close="showRoleDialog = false"
          @success="hRoleSuccess"
        />
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { getEmployeesList, delEmployee } from '@/api/employees'
import EmployeesEnum from '@/constant/employees'
import addOrEdit from './empDialog.vue'
import assignRole from './assignRole.vue'

// ! 在这里定义，每次打开的时候，就会转换，并且不会重复执行，性能高

// ! 优化方案 一
// [{id:1,value:'正式'},{id:2,value:'非正式'}]  ==>
//  {1:'正式',2:'非正式'}     将上面的 转换为，下面的
// const hireType = {}
// EmployeesEnum.hireType.forEach((item) => {
//   hireType[item.id] = item.value
// })
// console.log('转换之后的对象', hireType)

// ! 优化方案 二
// new Array().reduce(('累计和','当前值','索引','原数组')=>{},'默认值')
const hireType = EmployeesEnum.hireType.reduce((acc, item) => {
  acc[item.id] = item.value
  return acc
}, {})

export default {
  // ! 局部注册组件，组件标签必须小写，大写会报错
  components: { addOrEdit, assignRole },
  data() {
    return {
      // pageParams: {
      page: 1, // 页码
      pagesize: 5, // 每页条数
      // },
      EmployeesList: [], // 列表数据
      total: 0, // 总页数
      showDialog: false, // 新增的弹出框
      showRoleDialog: false, // 权限的弹出框
      curId: '' // 当前分配角色的 id
    }
  },
  created() {
    this.loadEmployeesList()
  },
  methods: {
    // ! 用 枚举 处理聘用形式的格式
    forOfEmploymentFormat(id) {
      // // console.log('需要用到的参数', EmployeesEnum.hireType)
      // const item = EmployeesEnum.hireType.find((item) => item.id === id)
      // if (item) {
      //   return item.value
      // } else {
      //   return '未知'
      // }
      // ! 优化代码，先转换成对象形式，直接返回 id
      return hireType[id]
    },
    // ! 分页
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.page = 1
      this.pagesize = val
      this.loadEmployeesList()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.page = val
      this.loadEmployeesList()
    },
    // ! 获取员工列表
    async loadEmployeesList() {
      try {
        const res = await getEmployeesList({
          // 使用解构
          page: this.page,
          pagesize: this.pagesize
        })
        this.EmployeesList = res.data.rows
        this.total = res.data.total
        // console.log('员工数据', this.EmployeesList)
      } catch (error) {
        console.log(error)
      }
    },
    // ! 删除的弹出框
    hDel(id) {
      this.$confirm('此操作将永久删除该员工, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.doDel(id)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消删除'
          })
        })
    },
    // ! 删除员工
    async doDel(id) {
      try {
        const res = await delEmployee(id)
        this.$message.success(res.message)
        // 如果当前页面的员工只有一个，就翻到上一页
        if (this.EmployeesList.length === 1) {
          this.page--
          // 如果已经是第一页了，就保持在第一页
          if (this.page <= 0) {
            this.page = 1
          }
        }
        this.loadEmployeesList()
      } catch (error) {
        // console.log(error)
      }
    },
    // ! 添加数据成功
    hSuccess() {
      this.showDialog = false
      // 每次添加 总条数 ++
      this.total++
      // 求最大的页码数
      this.page = Math.ceil(this.total / this.pagesize)
      this.loadEmployeesList()
    },
    // ! 导出 excel
    async hExportExcel() {
      try {
        // 这里和之前的接口一样，获取列表的数据
        const res = await getEmployeesList({
          page: this.page,
          pagesize: this.pagesize
        })
        console.log('excel', res)
        const list = res.data.rows
        const { header, data } = this.formatData(list)
        console.log('header', header)
        console.log('data', data)
        //  实现导出
        import('@/vendor/Export2Excel').then((excel) => {
          console.log(excel)
          excel.export_json_to_excel({
            header: header,
            data: data,
            filename: 'bbb', // 文件名称
            autoWidth: true, // 宽度自适应
            bookType: 'xlsx' // 生成的文件类型
          })
        })
      } catch (error) {
        console.log(error)
      }
    },
    // ! 导出数据的格式化 函数
    formatData(list) {
      const mapInfo = {
        id: '编号',
        password: '密码',
        mobile: '手机号',
        username: '姓名',
        timeOfEntry: '入职日期',
        formOfEmployment: '聘用形式',
        correctionTime: '转正日期',
        workNumber: '工号',
        departmentName: '部门',
        staffPhoto: '头像地址'
      }
      // 定义一个 表头
      let header = []
      // 存储表头
      let data = []
      const one = list[0]
      if (!one) {
        return { header, data }
      }
      console.log(Object.keys(one))

      // 转换表头
      header = Object.keys(one).map((enkey) => {
        return mapInfo[enkey]
      })
      // 转换数据
      data = list.map((obj) => {
        // 这里用的是 hireType 表单数据
        obj.formOfEmployment = hireType[obj.formOfEmployment] || '未知'
        return Object.values(obj)
      })
      return { header, data }
    },
    // ! 权限
    hAssignRole(id) {
      this.showRoleDialog = true
      // console.log(id)
      // 把 id 传给 权限子组件
      this.curId = id
    },
    // ! 关闭弹层
    hRoleSuccess() {
      this.showRoleDialog = false
      this.loadEmployeesList()
    }
  }
}
</script>
